{{define "base"}}
<!DOCTYPE html>
<html lang="en">

<!-- Copyright 2022 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0
that can be found in the LICENSE file. -->
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <title>{{block "title" .}}LUCI Deploy{{end}}</title>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
    }
    .tooltip {
      font-size: 12px;
    }
    .font-small {
      font-size: 12px;
    }
    a {
      text-decoration: none!important;
    }
    .user-avatar {
      width: 30;
      height: 30px;
      border-radius: 5px;
    }
    #asset-title {
      margin-bottom: 0px;
    }
    #asset-title img {
      width: 40px;
      height: 40px;
    }
    .popover-html-content {
      display: none;
    }
    .popover-big {
      max-width: 800px;
    }
    {{block "style" .}}{{end}}
  </style>

  <script type="text/javascript">
    function onPageLoaded() {
      // Activate all fancy Bootstrap popovers and tooltips.
      document.querySelectorAll('[data-bs-toggle="popover"]').forEach(
          elem => {
            let opts = {container: 'body'};
            let content = elem.querySelector('.popover-html-content');
            if (content != null) {
              content.remove();
              content.classList.remove('popover-html-content');
              opts['html'] = true;
              opts['sanitize'] = false;
              opts['content'] = content;
              opts['template'] = `
              <div class="popover popover-big" role="tooltip">
                <div class="popover-arrow"></div>
                <h3 class="popover-header"></h3>
                <div class="popover-body"></div>
              </div>
              `;
            }
            return new bootstrap.Popover(elem, opts);
          }
      );
      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(
          elem => new bootstrap.Tooltip(elem, {container: 'body'})
      );

      // Draw percent bars for all elements with "percent-widget" class.
      document.querySelectorAll('.percent-widget').forEach(
          elem => {
            let percent = parseInt(elem.getAttribute('data-percent'), 10);
            if (percent != 0 && !isNaN(percent)) {
              elem.style.background = `linear-gradient(\
                  to right, \
                  #b8ffce ${percent}%, \
                  #e3ffec ${percent}% 100%)`;
            }
          }
      );
    }
  </script>
</head>

<body class="pt-2" onload="onPageLoaded()">
  <div class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-light rounded border mb-2">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">LUCI Deploy</a>
        <span class="navbar-text">
          {{if .User.Picture}}
          <img class="user-avatar" referrerpolicy="no-referrer" src="{{.User.Picture}}">
          {{end}}
          {{.User.Email}} | <a href="{{.LogoutURL}}">Logout</a>
        </span>
      </div>
    </nav>

    <div id="content-box">
      {{block "content" .}}{{end}}
    </div>

    <footer style="color: #cccccc;">
      <hr class="mt-1 mb-1">
      <p class="float-end small">
        <span class="ms-2">Version: {{.AppVersion}}</span>
      </p>
    </footer>
  </div>
</body>

</html>
{{end}}


{{define "assetTitle"}}
<img src="/static/icons/{{.Icon}}" title="{{.Kind}}"> {{.Name}}
{{end}}


{{define "linkHref"}}
{{if .Href}}
<a
  href="{{.Href}}" target="{{.Target}}"
  {{if .Tooltip}}
  data-bs-toggle="tooltip"
  data-bs-html="true"
  data-bs-placement="top"
  data-bs-trigger="hover"
  title="{{.Tooltip}}"
  {{end}}
>{{if .Text}}{{.Text}}{{else}}-{{end}}</a>
{{else}}
<span
  {{if .Tooltip}}
  data-bs-toggle="tooltip"
  data-bs-html="true"
  data-bs-placement="top"
  data-bs-trigger="hover"
  title="{{.Tooltip}}"
  {{end}}
>{{if .Text}}{{.Text}}{{else}}-{{end}}</span>
{{end}}
{{end}}


{{define "breadcrumbs"}}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-2">
    {{range $crumb := .Breadcrumbs }}
      {{if $crumb.Last}}
      <li class="breadcrumb-item active" aria-current="page">
        {{if $crumb.Icon}}
        <img src="/static/icons/{{$crumb.Icon}}">
        {{end}}
        {{$crumb.Title}}
      </li>
      {{else}}
      <li class="breadcrumb-item">
        <a href="{{$crumb.Href}}">
          {{if $crumb.Icon}}
          <img src="/static/icons/{{$crumb.Icon}}">
          {{end}}
          {{$crumb.Title}}
        </a>
      </li>
      {{end}}
    {{end}}
  </ol>
</nav>
{{end}}


{{define "assetOverview"}}
<div class="row align-items-center pb-3">
  <div class="col-8">
    <h3 id="asset-title">{{template "assetTitle" .Ref}}</h3>
  </div>

  <div class="col-4">
    <div class="row">
      <div class="col">Status</div>
      <div class="col"><span class="badge {{.BadgeClass}}">{{.State}}</span></div>
    </div>

    <div class="row">
      <div class="col">
        <span data-bs-toggle="popover"
              data-bs-placement="left"
              data-bs-trigger="hover"
              data-bs-content="
                  The last time the actuator reported the current observed
                  state and Infrastructure-as-Code (IaC) configuration of
                  this asset.
        ">
        Last check in
        </span>
      </div>
      <div class="col">{{template "linkHref" .LastCheckIn}}</div>
    </div>

    <div class="row">
      <div class="col">
        <span data-bs-toggle="popover"
              data-bs-placement="left"
              data-bs-trigger="hover"
              data-bs-content="
                  The last time the actuator tried to update the asset
                  to match the Infrastructure-as-Code (IaC) configuration
                  (successfully or not).
        ">
        Last actuation
        </span>
      </div>
      <div class="col">{{template "linkHref" .LastActuation}}</div>
    </div>

    <div class="row">
      <div class="col">
        <span data-bs-toggle="popover"
              data-bs-placement="left"
              data-bs-trigger="hover"
              data-bs-content="
                  The revision of the Infrastructure-as-Code (IaC)
                  configuration the actuator successfully applied most
                  recently.
        ">
        Applied revision
        </span>
      </div>
      <div class="col">{{template "linkHref" .Revision}}</div>
    </div>
  </div>
</div>
{{end}}


{{define "historyListing"}}
<div>
  {{if .}}
  <table class="table table-sm">
    <tbody>
    {{range .}}
      <tr class="{{.TableClass}}">
        <td class="col-1">{{template "linkHref" .ID}}</td>
        <td class="col-2">{{template "linkHref" .Age}}</td>
        <td class="col-7">
          <span
            data-bs-toggle="popover"
            data-bs-placement="top"
            data-bs-trigger="hover"
          >
          <div class="popover-html-content font-monospace font-small lh-sm">
            <div><b>Commit: </b>{{.Commit.Rev}}</div>
            <div><b>Author: </b>{{.Commit.AuthorEmail}}</div>
            <hr class="mt-2 mb-3">
            <pre>{{.Commit.CommitMessage}}</pre>
          </div>
          {{template "linkHref" .Commit.Subject}}
          </span>
        </td>
        <td class="col-2">
          <a href="{{.ID.Href}}">
            <span class="badge {{.BadgeClass}}">{{.Outcome}}</span>
          </a>
        </td>
      </tr>
    {{end}}
    </tbody>
  </table>
  {{else}}
  <i>No history</i>
  {{end}}
</div>
{{end}}
